import React, { useState } from 'react';
import { Card, Row, Col, Button, Timeline, Statistic, Image, Breadcrumb } from 'antd';
import { 
  PhoneOutlined, 
  TrophyOutlined, 
  TeamOutlined, 
  CustomerServiceOutlined,
  SafetyOutlined,
  RocketOutlined,
  GlobalOutlined,
  BulbOutlined,
  HeartOutlined,
  StarOutlined,
  HomeOutlined,
  UserOutlined,
  CheckCircleOutlined,
  StarFilled,
  EyeOutlined
} from '@ant-design/icons';
import { ContactModal, BackToTop } from '../../components/ui';
import { useResponsive, useResponsiveGutter } from '../../hooks/useResponsive';
import { APP_CONFIG } from '../../constants';

const AboutPage: React.FC = () => {
  const [contactModalOpen, setContactModalOpen] = useState(false);
  const { isMobile, isTablet } = useResponsive();
  const gutter = useResponsiveGutter({
    xs: [16, 16],
    sm: [16, 16],
    md: [24, 24],
    lg: [32, 32],
    xl: [32, 32]
  });

  // 公司数据统计（3组数字）
  const companyStats = [
    { title: '12年专注户外广告', value: 12, suffix: '年', icon: <TrophyOutlined /> },
    { title: '服务3,800+品牌', value: 3800, suffix: '+', icon: <TeamOutlined /> },
    { title: '单店最快6小时完工', value: 6, suffix: '小时', icon: <RocketOutlined /> }
  ];

  // 核心优势
  const coreAdvantages = [
    {
      icon: <BulbOutlined className="text-4xl text-primary-500" />,
      title: '专业设计团队',
      description: '拥有12年行业经验的专业设计师团队，深谙品牌视觉传达之道'
    },
    {
      icon: <RocketOutlined className="text-4xl text-primary-500" />,
      title: '快速响应服务',
      description: '珠三角地区2小时内响应，24小时出设计方案，高效执行'
    },
    {
      icon: <GlobalOutlined className="text-4xl text-primary-500" />,
      title: '本地化优势',
      description: '深耕珠三角12年，熟悉本地市场，拥有完善的供应链体系'
    },
    {
      icon: <SafetyOutlined className="text-4xl text-primary-500" />,
      title: '品质保障',
      description: '严格的质量管控体系，从设计到制作安装全程品质保障'
    }
  ];

  // 发展历程
  const milestones = [
    {
      year: '2012',
      title: '公司成立',
      description: '财兴广告在中山成立，专注于广告设计制作服务'
    },
    {
      year: '2015',
      title: '业务拓展',
      description: '服务范围扩展至珠三角全域，客户数量突破500家'
    },
    {
      year: '2018',
      title: '技术升级',
      description: '引进先进设备和工艺，数字化转型提升品质'
    },
    {
      year: '2024',
      title: '持续创新',
      description: '推出AI智能设计工具，提供优质品牌视觉解决方案'
    }
  ];

  // 团队介绍（3×2照片墙）
  const teamMembers = [
    {
      name: '赵总监',
      position: '创意总监',
      experience: '15年设计经验',
      specialty: '品牌视觉设计、创意策划',
      avatar: '/images/team/team-01.jpg'

    },
    {
      name: '李经理',
      position: '项目经理',
      experience: '12年项目管理经验',
      specialty: '项目统筹、客户服务',
      avatar: '/images/team/team-02.jpg'

    },
    {
      name: '李师傅',
      position: '制作主管',
      experience: '10年制作经验',
      specialty: '广告制作、安装施工',
      avatar: '/images/team/team-03.jpg'
    }
  ];

  return (
    <div className="min-h-screen bg-gradient-to-br from-gray-50 via-blue-50/30 to-purple-50/30">


      {/* 关于财兴广告 - 左右布局 - 响应式优化 */}
      <section className="py-12 sm:py-16 lg:py-20 bg-white relative overflow-hidden">
        {/* 背景装饰 */}
        <div className="absolute top-0 right-0 w-1/3 h-full bg-gradient-to-l from-blue-50 to-transparent opacity-50"></div>
        <div className="absolute bottom-0 left-0 w-1/4 h-1/2 bg-gradient-to-tr from-purple-50 to-transparent opacity-30"></div>
        
        <div className="container mx-auto px-4 sm:px-6 lg:px-8 relative z-10">
          <div className="grid grid-cols-1 lg:grid-cols-2 gap-8 sm:gap-10 lg:gap-12 items-center max-w-7xl mx-auto">
            {/* 左侧图片 - 响应式优化 */}
            <div className="relative group order-2 lg:order-1">
              <div className="relative overflow-hidden rounded-2xl sm:rounded-3xl shadow-xl sm:shadow-2xl">
                <img 
                  src="/images/about.jpg"
                  alt="财兴广告办公环境"
                  className="w-full h-[300px] sm:h-[400px] lg:h-[500px] object-cover group-hover:scale-105 transition-transform duration-700"
                />
                {/* 图片装饰 */}
                <div className="absolute -top-6 -right-6 w-24 h-24 bg-gradient-to-br from-blue-500 to-purple-500 rounded-full opacity-20 blur-xl"></div>
                <div className="absolute -bottom-4 -left-4 w-32 h-32 bg-gradient-to-tr from-purple-500 to-pink-500 rounded-full opacity-15 blur-2xl"></div>
              </div>
              
              {/* 浮动统计卡片 - 响应式优化 */}
              <div className="absolute -bottom-4 -right-4 sm:-bottom-6 sm:-right-6 lg:-bottom-8 lg:-right-8 bg-white rounded-xl sm:rounded-2xl p-3 sm:p-4 lg:p-6 shadow-lg sm:shadow-xl border border-gray-100">
                <div className="text-center">
                  <div className="text-xl sm:text-2xl lg:text-3xl font-bold bg-gradient-to-r from-blue-600 to-purple-600 bg-clip-text text-transparent mb-1">
                    12+
                  </div>
                  <div className="text-xs sm:text-sm text-gray-600 font-medium">年专业经验</div>
                </div>
              </div>
            </div>
            
            {/* 右侧内容 - 响应式优化 */}
            <div className="space-y-6 sm:space-y-8 order-1 lg:order-2">
              <div>
                <h1 className="text-2xl sm:text-3xl lg:text-4xl xl:text-5xl font-bold text-gray-900 mb-4 sm:mb-6 leading-tight">
                  财兴广告
                  <span className="block text-xl sm:text-2xl lg:text-3xl xl:text-4xl bg-gradient-to-r from-blue-600 to-purple-600 bg-clip-text text-transparent mt-2">
                    {APP_CONFIG.slogan}
                  </span>
                </h1>
                <p className="text-base sm:text-lg lg:text-xl text-gray-600 leading-relaxed mb-6 sm:mb-8">
                  财兴广告成立于2012年，专注于为珠三角地区企业提供专业的广告设计制作服务。
                  我们以<span className="text-blue-600 font-semibold">"专业、快速、贴心"</span>为服务理念，
                  致力于成为客户最信赖的品牌视觉合作伙伴。
                </p>
              </div>
              
              {/* 核心数据 - 响应式优化 */}
              <div className="grid grid-cols-3 gap-3 sm:gap-4 lg:gap-6">
                <div className="text-center p-3 sm:p-4 bg-gradient-to-br from-blue-50 to-blue-100 rounded-xl sm:rounded-2xl">
                  <div className="text-lg sm:text-xl lg:text-2xl font-bold text-blue-600 mb-1">3800+</div>
                  <div className="text-xs sm:text-sm text-gray-600">服务客户</div>
                </div>
                <div className="text-center p-3 sm:p-4 bg-gradient-to-br from-purple-50 to-purple-100 rounded-xl sm:rounded-2xl">
                  <div className="text-lg sm:text-xl lg:text-2xl font-bold text-purple-600 mb-1">98.5%</div>
                  <div className="text-xs sm:text-sm text-gray-600">满意度</div>
                </div>
                <div className="text-center p-3 sm:p-4 bg-gradient-to-br from-green-50 to-green-100 rounded-xl sm:rounded-2xl">
                  <div className="text-lg sm:text-xl lg:text-2xl font-bold text-green-600 mb-1">6小时</div>
                  <div className="text-xs sm:text-sm text-gray-600">快速完工</div>
                </div>
              </div>
              
              {/* 企业价值观 - 响应式优化 */}
              <div className="space-y-4">
                <h3 className="text-xl sm:text-2xl font-bold text-gray-900 mb-4 sm:mb-6">企业价值观</h3>
                <div className="space-y-3 sm:space-y-4">
                  <div className="flex items-start gap-3 sm:gap-4 p-3 sm:p-4 bg-gradient-to-r from-blue-50 to-transparent rounded-lg sm:rounded-xl">
                    <div className="w-10 h-10 sm:w-12 sm:h-12 bg-gradient-to-br from-blue-500 to-blue-600 rounded-full flex items-center justify-center flex-shrink-0">
                      <span className="text-white text-lg sm:text-xl">🎯</span>
                    </div>
                    <div>
                      <h4 className="font-semibold text-gray-900 mb-1 text-sm sm:text-base">企业使命</h4>
                      <p className="text-gray-600 text-xs sm:text-sm">为客户创造更大的品牌价值，让每一个品牌都能闪闪发光</p>
                    </div>
                  </div>
                  <div className="flex items-start gap-3 sm:gap-4 p-3 sm:p-4 bg-gradient-to-r from-purple-50 to-transparent rounded-lg sm:rounded-xl">
                    <div className="w-10 h-10 sm:w-12 sm:h-12 bg-gradient-to-br from-purple-500 to-purple-600 rounded-full flex items-center justify-center flex-shrink-0">
                      <span className="text-white text-lg sm:text-xl">👁️</span>
                    </div>
                    <div>
                      <h4 className="font-semibold text-gray-900 mb-1 text-sm sm:text-base">企业愿景</h4>
                      <p className="text-gray-600 text-xs sm:text-sm">成为珠三角地区最受信赖的品牌视觉服务商</p>
                    </div>
                  </div>
                  <div className="flex items-start gap-3 sm:gap-4 p-3 sm:p-4 bg-gradient-to-r from-green-50 to-transparent rounded-lg sm:rounded-xl">
                    <div className="w-10 h-10 sm:w-12 sm:h-12 bg-gradient-to-br from-green-500 to-green-600 rounded-full flex items-center justify-center flex-shrink-0">
                      <span className="text-white text-lg sm:text-xl">💎</span>
                    </div>
                    <div>
                      <h4 className="font-semibold text-gray-900 mb-1 text-sm sm:text-base">核心价值观</h4>
                      <p className="text-gray-600 text-xs sm:text-sm">专业、诚信、创新、共赢，客户至上，品质第一</p>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </section>

      {/* 数字统计区域 - 响应式优化 */}
      <section className="py-12 sm:py-16 bg-white relative overflow-hidden">
        <div className="container mx-auto px-4 sm:px-6 lg:px-8 relative z-10">
          <div className="text-center mb-8 sm:mb-12">
            <h2 className="text-2xl sm:text-3xl lg:text-4xl font-bold bg-gradient-to-r from-blue-600 via-purple-600 to-blue-800 bg-clip-text text-transparent mb-3 sm:mb-4">
              数字见证实力
            </h2>
            <p className="text-base sm:text-lg lg:text-xl text-gray-600 max-w-2xl mx-auto">
              12年专业服务，用实力证明品质
            </p>
          </div>
          
          <Row gutter={[16, 16]} className="text-center">
            {companyStats.map((stat, index) => (
              <Col xs={24} sm={8} md={8} key={index}>
                <div className="group">
                  <Card className="h-full border-0 bg-gradient-to-br from-white to-blue-50/30 rounded-xl sm:rounded-2xl overflow-hidden shadow-lg hover:shadow-xl transition-all duration-300 hover:-translate-y-1">
                    <div className="p-4 sm:p-6 lg:p-8">
                      <div className="text-blue-600 text-2xl sm:text-3xl lg:text-4xl mb-3 sm:mb-4 group-hover:scale-110 transition-transform duration-300">
                        {stat.icon}
                      </div>
                      <Statistic
                        title={<span className="text-gray-700 font-medium text-sm sm:text-base lg:text-lg">{stat.title}</span>}
                        value={stat.value}
                        suffix={stat.suffix}
                        valueStyle={{ 
                          background: 'linear-gradient(135deg, #2563eb, #7c3aed)',
                          WebkitBackgroundClip: 'text',
                          WebkitTextFillColor: 'transparent',
                          fontSize: isMobile ? '2rem' : isTablet ? '2.5rem' : '3rem', 
                          fontWeight: 'bold',
                          lineHeight: '1.2'
                        }}
                      />
                    </div>
                  </Card>
                </div>
              </Col>
            ))}
          </Row>
           
          {/* 核心优势区域 - 响应式优化 */}
          <div className="mt-12 sm:mt-16">
            <div className="text-center mb-8 sm:mb-12">
              <h3 className="text-2xl sm:text-3xl font-bold bg-gradient-to-r from-blue-600 via-purple-600 to-blue-800 bg-clip-text text-transparent mb-3 sm:mb-4">
                核心优势
              </h3>
              <p className="text-base sm:text-lg text-gray-600 max-w-2xl mx-auto">
                专业团队 · 快速响应 · 本地优势 · 品质保障
              </p>
            </div>
            
            <Row gutter={[16, 16]}>
              {coreAdvantages.map((advantage, index) => (
                <Col xs={12} sm={12} md={6} key={index}>
                  <div className="group h-full">
                    <Card className="h-full border-0 bg-gradient-to-br from-white to-blue-50/30 rounded-xl sm:rounded-2xl overflow-hidden shadow-lg hover:shadow-xl transition-all duration-300 hover:-translate-y-1">
                      <div className="p-4 sm:p-6 h-full flex flex-col">
                        <div className="mb-3 sm:mb-4 group-hover:scale-110 transition-transform duration-300 flex-shrink-0">
                          {advantage.icon}
                        </div>
                        <h4 className="text-base sm:text-lg lg:text-xl font-bold text-gray-900 mb-2 sm:mb-3 group-hover:text-blue-600 transition-colors duration-300 flex-shrink-0">
                          {advantage.title}
                        </h4>
                        <p className="text-xs sm:text-sm lg:text-base text-gray-600 leading-relaxed flex-grow">
                          {advantage.description}
                        </p>
                      </div>
                    </Card>
                  </div>
                </Col>
              ))}
            </Row>
          </div>
        </div>
      </section>



      {/* 发展历程 - 响应式优化 */}
      <section className="py-12 sm:py-16 bg-gradient-to-br from-gray-50 to-blue-50/30 relative overflow-hidden">
        <div className="container mx-auto px-4 sm:px-6 lg:px-8 relative z-10">
          <div className="text-center mb-8 sm:mb-12">
            <h2 className="text-2xl sm:text-3xl font-bold bg-gradient-to-r from-blue-600 via-purple-600 to-blue-800 bg-clip-text text-transparent mb-3 sm:mb-4">
              发展历程
            </h2>
            <p className="text-base sm:text-lg text-gray-600 max-w-xl mx-auto">
              12年成长路，见证每一个重要时刻
            </p>
          </div>
          
          {/* 简洁现代时间轴 */}
          <div className="max-w-5xl mx-auto">
            {isMobile ? (
              /* 移动端垂直时间轴 */
              <div className="space-y-6">
                {milestones.map((milestone, index) => (
                  <div key={index} className="flex items-start gap-4 group">
                    <div className="flex-shrink-0 relative">
                      <div className="w-3 h-3 bg-blue-500 rounded-full border-2 border-white shadow-md group-hover:scale-110 transition-transform duration-200"></div>
                      {index < milestones.length - 1 && (
                        <div className="absolute top-3 left-1/2 transform -translate-x-1/2 w-0.5 h-10 bg-gray-200"></div>
                      )}
                    </div>
                    <Card className="flex-1 bg-white border border-gray-100 rounded-lg shadow-sm hover:shadow-md transition-all duration-200">
                      <div className="p-3 sm:p-4">
                        <div className="flex items-center gap-2 sm:gap-3 mb-2">
                          <span className="bg-blue-500 text-white font-medium text-xs sm:text-sm px-2 sm:px-3 py-1 rounded-full">
                            {milestone.year}
                          </span>
                          <h3 className="text-sm sm:text-base font-semibold text-gray-900">
                            {milestone.title}
                          </h3>
                        </div>
                        <p className="text-xs sm:text-sm text-gray-600 leading-relaxed">
                          {milestone.description}
                        </p>
                      </div>
                    </Card>
                  </div>
                ))}
              </div>
            ) : (
              /* 桌面端横向时间轴 */
              <div className="relative">
                {/* 横向连接线 */}
                <div className="absolute top-6 left-0 right-0 h-0.5 bg-gray-200"></div>
                
                <div className="grid grid-cols-4 gap-6">
                  {milestones.map((milestone, index) => (
                    <div key={index} className="relative group text-center">
                      {/* 时间点 */}
                      <div className="absolute top-4 left-1/2 transform -translate-x-1/2 z-10">
                        <div className="w-4 h-4 bg-blue-500 rounded-full border-3 border-white shadow-md group-hover:scale-110 transition-transform duration-200"></div>
                      </div>
                      
                      {/* 卡片内容 */}
                      <Card className="mt-8 sm:mt-10 bg-white border border-gray-100 rounded-lg shadow-sm hover:shadow-md transition-all duration-200 hover:-translate-y-1">
                        <div className="p-3 sm:p-4">
                          <div className="mb-2 sm:mb-3">
                            <span className="bg-blue-500 text-white font-medium text-xs sm:text-sm px-2 sm:px-3 py-1 rounded-full">
                              {milestone.year}
                            </span>
                          </div>
                          <h3 className="text-xs sm:text-sm font-semibold text-gray-900 mb-1 sm:mb-2">
                            {milestone.title}
                          </h3>
                          <p className="text-xs text-gray-600 leading-relaxed">
                            {milestone.description}
                          </p>
                        </div>
                      </Card>
                    </div>
                  ))}
                </div>
              </div>
            )}
          </div>
        </div>
      </section>



      {/* 专业团队 - 响应式优化 */}
      <section className="py-12 sm:py-16 bg-white relative overflow-hidden">
        <div className="container mx-auto px-4 sm:px-6 lg:px-8 relative z-10">
          {/* 标题区域 */}
          <div className="text-center mb-8 sm:mb-12">
            <h2 className="text-2xl sm:text-3xl font-bold bg-gradient-to-r from-blue-600 via-purple-600 to-blue-800 bg-clip-text text-transparent mb-3 sm:mb-4">
              专业团队
            </h2>
            <p className="text-base sm:text-lg text-gray-600 max-w-2xl mx-auto">
              汇聚行业精英，为您提供专业的广告设计服务
            </p>
          </div>
          
          {/* 团队成员网格 - 响应式优化 */}
          <div className="max-w-6xl mx-auto">
            <Row gutter={[16, 16]}>
              {teamMembers.slice(0, 6).map((member, index) => (
                <Col xs={12} sm={8} md={8} key={index}>
                  <div className="group h-full">
                    <Card className="h-full border-0 bg-gradient-to-br from-white to-blue-50/30 rounded-xl sm:rounded-2xl overflow-hidden shadow-lg hover:shadow-xl transition-all duration-300 hover:-translate-y-1">
                      <div className="p-4 sm:p-6 text-center h-full flex flex-col">
                        {/* 头像区域 - 响应式优化 */}
                        <div className="mb-3 sm:mb-4 flex-shrink-0">
                          <div className="w-12 h-12 sm:w-14 sm:h-14 lg:w-16 lg:h-16 mx-auto rounded-full overflow-hidden border-2 sm:border-3 border-white shadow-lg group-hover:scale-105 transition-all duration-300">
                            <img 
                              src={member.avatar} 
                              alt={member.name}
                              className="w-full h-full object-cover"
                              onError={(e) => {
                                // 如果图片加载失败，显示首字母
                                const target = e.target as HTMLImageElement;
                                target.style.display = 'none';
                                const parent = target.parentElement;
                                if (parent) {
                                  parent.className += ' bg-gradient-to-br from-blue-400 to-purple-500 flex items-center justify-center';
                                  parent.innerHTML = `<span class="text-white font-bold text-lg">${member.name.charAt(0)}</span>`;
                                }
                              }}
                            />
                          </div>
                        </div>
                        
                        {/* 基本信息 */}
                        <div className="space-y-2 flex-grow flex flex-col justify-between">
                          <div>
                            <h3 className={`${isMobile ? 'text-base' : 'text-lg'} font-bold text-gray-900 group-hover:text-blue-600 transition-colors duration-300 mb-2`}>
                              {member.name}
                            </h3>
                            
                            <div className="inline-flex items-center px-3 py-1 bg-blue-100 rounded-full mb-2">
                              <span className={`${isMobile ? 'text-xs' : 'text-sm'} font-medium text-blue-700`}>
                                {member.position}
                              </span>
                            </div>
                          </div>
                          
                          <div className="mt-auto">
                            <p className={`${isMobile ? 'text-xs' : 'text-sm'} text-gray-600 mb-1`}>
                              {member.experience}
                            </p>
                            
                            {!isMobile && (
                              <p className="text-xs text-gray-500">
                                专长：{member.specialty}
                              </p>
                            )}
                          </div>
                        </div>
                      </div>
                    </Card>
                  </div>
                </Col>
              ))}
            </Row>
          </div>
          
          {/* 团队总结 - 响应式优化 */}
          <div className="text-center mt-8 sm:mt-12 lg:mt-16">
            <div className="bg-gradient-to-r from-blue-50 to-purple-50 rounded-xl sm:rounded-2xl p-4 sm:p-6 border border-blue-100">
              <h3 className="text-base sm:text-lg font-semibold text-gray-800 mb-2">专业团队，值得信赖</h3>
              <p className="text-sm sm:text-base text-gray-600">12年专业经验 · 服务客户1000+ · 客户满意度98.5%</p>
            </div>
          </div>
        </div>
      </section>



      {/* 联系弹窗 */}
      <ContactModal
        open={contactModalOpen}
        onClose={() => setContactModalOpen(false)}
      />
      
      {/* 返回顶部按钮 */}
      <BackToTop />
    </div>
  );
};

export default AboutPage;